<template>
  <div
    class="relative bg-white rounded-xl shadow-sm transition-all duration-200 group hover:shadow-lg hover:scale-105 border border-gray-100 overflow-hidden aspect-video"
    :class="image.isFavorite ? 'ring-2 ring-yellow-400' : ''"
    style="min-width: 0"
  >
    <!-- 图片充满 -->
    <img
      :src="image.url"
      :alt="image.name"
      class="absolute inset-0 w-full h-full object-cover"
    />
    <!-- 黑色渐变遮罩，仅hover时显示 -->
    <div
      class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-black/70 via-black/30 to-transparent pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-200"
    ></div>
    <!-- 信息区：左下角，仅hover时显示 -->
    <div
      class="absolute bottom-2 left-2 z-10 flex flex-col items-start gap-1 text-white drop-shadow opacity-0 group-hover:opacity-100 transition-opacity duration-200"
    >
      <div class="font-medium text-sm truncate max-w-[120px]">
        {{ image.name }}
      </div>
      <div class="flex flex-wrap gap-1">
        <Badge
          v-for="tag in image.tags"
          :key="tag"
          variant="outline"
          class="bg-black/40 text-white border-white/30"
          >{{ tag }}</Badge
        >
      </div>
      <div class="text-xs opacity-80">
        上传: {{ formatTime(image.uploadTime) }}
      </div>
      <div class="text-xs opacity-80">使用: {{ image.usedCount }} 次</div>
    </div>

    <!-- 功能区：右下角下拉菜单，仅hover时显示 -->
    <div
      class="absolute bottom-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
    >
      <DropdownMenu>
        <DropdownMenuTrigger as-child>
          <Button
            size="icon"
            variant="secondary"
            class="bg-black/60 text-white hover:bg-black/80 border border-white/20"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              class="w-5 h-5"
            >
              <circle cx="12" cy="12" r="2" />
              <circle cx="19" cy="12" r="2" />
              <circle cx="5" cy="12" r="2" />
            </svg>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" class="min-w-[140px]">
          <DropdownMenuItem @click="$emit('caption', image)"
            >生成文案</DropdownMenuItem
          >
          <DropdownMenuItem @click="$emit('expand', image)"
            >扩展</DropdownMenuItem
          >
          <DropdownMenuItem @click="$emit('delete', image)"
            >删除</DropdownMenuItem
          >
          <DropdownMenuItem @click="$emit('favorite', image)">
            {{ image.isFavorite ? "取消收藏" : "收藏" }}
          </DropdownMenuItem>
          <DropdownMenuItem @click="showTagEditor = true"
            >编辑标签</DropdownMenuItem
          >
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
    <!-- 标签编辑弹窗 -->
    <Dialog v-model:open="showTagEditor">
      <DialogContent>
        <DialogHeader>编辑标签</DialogHeader>
        <TagEditor :tags="localTags" @update:tags="updateTags" />
        <DialogFooter>
          <Button @click="saveTags">保存</Button>
          <Button variant="ghost" @click="showTagEditor = false">取消</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import type { MaterialImage } from "../stores/material";
import { Button } from "./ui/button";
import { Badge } from "./ui/badge";
import { Dialog, DialogContent, DialogHeader, DialogFooter } from "./ui/dialog";
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu";
import TagEditor from "./TagEditor.vue";
import { ref } from "vue";

const props = defineProps<{ image: MaterialImage }>();
const emit = defineEmits([
  "update:tags",
  "caption",
  "expand",
  "delete",
  "favorite",
]);
const showTagEditor = ref(false);
const localTags = ref([...props.image.tags]);

function formatTime(ts: number) {
  const d = new Date(ts);
  return d.toLocaleDateString();
}

function updateTags(tags: string[]) {
  localTags.value = tags;
}

function saveTags() {
  emit("update:tags", localTags.value);
  showTagEditor.value = false;
}
</script>
